<template>
    <list-box :name="name" :word="word">
      <swiper class="list-swiper" next-margin="30rpx" :style="{height:`${200*props.row}rpx`}">
        <swiper-item class="swiper-item" v-for="(item,index) in props.column" :key="index">
          <course-item v-for="(item1,index1) in props.courseData.slice(index * props.row,(index + 1) * props.row)" :key="index1" :item="item1"></course-item>
        </swiper-item>
      </swiper>
    </list-box>
</template>
<script setup lang="ts">
  import courseItem from '@/components/common/course-item.vue'
  import listBox from './list-box.vue'
   const props = defineProps({
        name: {
          type: String,
          default: '热门推荐'
        },
        word: {
          type: String,
          default: null
        },
        // swiper-item展示的列数
        column: {
          type: Number,
          default: 2
        },
        // 展示几行数据
        row: {
          type: Number,
          default: 4
        },
        courseData: {
          type: Array,
          default: () => []
        }
      })
      
</script>

<style lang="scss" scoped>
  .list-box {
    .list-swiper {
      height: 800rpx;
    }
  }
</style>
